<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>通用表单</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../lib/gf/common_grid.js"></script>
    <script type="text/javascript" src="../lib/gf/dynamic_index.js"></script>
    <script type="text/javascript" src="../lib/gf/dist.js"></script>

</head>
<script type="text/javascript">
    Ext.Loader.setConfig({enabled: true});

    Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager'
    ]);
    var win, searchForm;
    Ext.onReady(function () {

        //获取url中的参数，如果传入了参数_id那么进行修改；否则，添加。
        var _urlparams = Ext.urlDecode(document.URL.split("?")[document.URL.split("?").length - 1]);
        var form_code = '';
        if(_urlparams && _urlparams.form_code){
            form_code = _urlparams.form_code;
        }
        var form_data,dicts;

        Ext.Ajax.request({
            async:false,
            url: '/form/'+form_code,
            method : 'GET',
            success: function(response, opts) {
                var data = Ext.decode(response.responseText);
                if(data) {
                    form_data = data;
                }
            },
            failure: function(response, opts) {
            }
        });
        dicts = getDictSimple();
        var fields = getFields(form_data);
        // console.log(fields);

        var sorters = [];
        Ext.Array.each(fields,function(filed){
            var sort = {};
            sort.property = filed;
            sort.direction = 'DESC';
            sorters.push(sort);
        });

        Ext.define( 'ModelList', {
            extend: 'Ext.data.Model',
            fields: fields,
            idProperty: '_id'
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            pageSize: 20,
            model: 'ModelList',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                url: '/form/common/list?collection='+form_code,
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'count'
                },
                simpleSortMode: true
            },
            sorters:sorters
        });


        var search_items = getSearch(form_data);
        searchForm = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            region: 'north',
            defaultType: 'textfield',
            layout: {type: 'table',columns:4},
            items: search_items
        });

        var columns = getColumns(form_data,dicts);

        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            loadMask: true,
            region: 'center',
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            columns:columns,
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying {0} - {1} of {2}',
                emptyMsg: "没有数据！！！"

            }),
            tbar: [
                {
                    pressed: true,
                    text: '条件清空',
                    icon : '../img/stop.png',
                    handler: function(){
                        searchForm.getForm().reset();
                    }
                },
                {
                    pressed: true,
                    text: '搜  索',
                    icon : '../img/search.png',
                    handler: doSearch
                },
                {
                    pressed: true,
                    text: "修  改",
                    icon : '../img/edit.png',
                    handler: function(){doEditTop(grid,"/admin/form/common_add.html?form_code="+form_code,"修改")}
                },
                {
                    pressed: true,
                    icon : '../img/add.png',
                    text: "添  加",
                    handler: function(){doAddTop("/admin/form/common_add.html?form_code="+form_code,"添加")}
                },
                {
                    pressed: true,
                    icon : '../img/delete.png',
                    text: "删  除",
                    handler: function(){doDel(grid,"/form/common/del?collection="+form_code,store)}
                }

            ]
        });


        var viewport = new Ext.Viewport({
                    layout: 'border',
                    renderTo: "topic-grid",
                    items: [searchForm,grid]}
        );

        function doSearch(){
            store.loadPage(1,{params:searchForm.getValues()});
        }
        // trigger the data store load
        store.on('beforeload',function(store, operation,eOpts){
            operation.params= searchForm.getValues();
        },this);
        store.loadPage(1);
        window.refresh = function(){
            store.loadPage(1);
        }

        window.closeWin = function(){
            win.hide();
        }

    });
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>